<template>
  <div class="tab-control">
    <div
      :class="{ active: currentindex === index }"
      class="tabitem"
      v-for="(item, index) in title"
      :key="item"
      @click="changecurrentindex(index)"
    >
      <span>{{ item }}</span>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  props: ['title'],
  setup(props, _) {
    const currentindex = ref(0)
    const changecurrentindex = (index) => {
      currentindex.value = index
      switch (index) {
        case 0:
          _.emit('mclick', 'pop')
          break
        case 1:
          _.emit('mclick', 'new')
          break
        default:
          return _.emit('mclick', 'sell')
      }
    }
    return {
      currentindex,
      changecurrentindex
    }
  }
}
</script>

<style lang="less" scoped>
.tab-control {
  display: flex;
  background-color: #fff;
  line-height: 40px;
  text-align: center;
  div {
    flex: 1;
    span {
      padding: 6px;
      margin-top: 4px;
    }
  }
}
.active {
  color: deeppink;
  & span {
    border-bottom: 2px solid red;
  }
}
</style>
